<template>
    <div>
      <!-- 新增图书表单 -->
      <el-form :model="newBook" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="Title">
              <el-input v-model="newBook.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Author">
              <el-input v-model="newBook.author"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="addBook">Add Book</el-button>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 图书列表 -->
      <el-table :data="books" style="width: 100%">
        <el-table-column prop="title" label="Title" width="180"></el-table-column>
        <el-table-column prop="author" label="Author" width="180"></el-table-column>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">Edit</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        newBook: {
          title: '',
          author: ''
        },
        books: [
          { title: 'Vue.js入门指南', author: '张三' },
          { title: '深入浅出Node.js', author: '李四' }
        ]
      };
    },
    methods: {
      addBook() {
        if (this.newBook.title && this.newBook.author) {
          this.books.push({ ...this.newBook });
          this.newBook = { title: '', author: '' }; // 清空输入框
        } else {
          this.$message.warning('请输入完整信息');
        }
      },
      handleEdit(row) {
        console.log('编辑:', row);
        // 这里可以添加编辑逻辑
      },
      handleDelete(index) {
        this.$confirm('确定要删除这本书吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.books.splice(index, 1);
          this.$message.success('删除成功!');
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 添加一些样式 */
  </style>